<template>
  <div class="tabbar">
    <router-link v-for="(item, index) in tabbarList" :key="index" class="tab-item" :to="item.path" active-class="isActive">
      <div class="item-wrap flex_a">
        <i :class="isRouter(item.path) ? item.img2 : item.img" />
        <div>{{ item.name }}</div>
      </div>
    </router-link>
  </div>
</template>


<script setup>
let props = defineProps(['tabbarList']);
import { useRoute } from "vue-router";


function isRouter(str) {
  let path = useRoute().path;
  return path.includes(str)
}
</script>


<style lang="scss" scoped>
.tabbar {
  width: 100%;
  height: 53px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}




.isActive {
  color: #FC5C82;
}


.tab-item {
  flex: 1;
  font-size: 12px;
  height: 100%;
}


.item-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;


}


img {
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
}


a {
  text-decoration: none;
  color: #697179;
}


a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: none;
  text-decoration: none;
}
</style>
